// Mobile-first media query helper
@mixin media($bp) {
  @media screen and (min-width: #{$bp}) {
    @content;
  }
}

// Clearfix helper
@mixin clearfix() {
  &:after {
    content: ".";  
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

// Screen reader only helper
.usa-sr-only {
  position: absolute;
  left:-999em;
}

@mixin sr-only() {
  position: absolute;
  left:-999em;
}

// Unstyled list helper

@mixin unstyled-list() {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;

  li {
    display: list-item;
    margin: 0;

    &:before {
      display: none;
    }

    &:after {
      display: none;
    }
  }
}

// Content size helpers
@mixin allow-layout-classes {

  margin: {
    left: auto;
    right: auto;
  }

  &.width-one-half {
    @include media($medium-screen) {
      width: 50%;
    }
  }

  &.width-one-third {
    @include media($medium-screen) {
      width: 33%;
    }
  }

  &.width-two-thirds {
    @include media($medium-screen) {
      width: 67%;
    }
  }

  &.width-one-fourth {
    @include media($medium-screen) {
      width: 25%;
    }
  }

  &.width-three-fourths {
    @include media($medium-screen) {
      width: 75%;
    }
  } 

  &.align-left {
    @include media($medium-screen) {
      float: left;
      margin-top: .5em;
      margin-right: 2em;
    }
  }

  &.align-right {
    @include media($medium-screen) {
      float: right;
      margin-top: .5em;
      margin-left: 2em;
    }
  }
}